<template>
	<view class="device">
		<view class="fixed-box" @touchmove.stop.prevent>
			<view class="header">
				<view class="content">
					<view class="user" @tap="$open('/pages/userinfo/userinfo')">
						<image class="avatar" :src="userinfo && userinfo.avatar"></image>
						<text class="name">{{userinfo && userinfo.nickname}}</text>
					</view>
					<view class="title">设备管理</view>
					<view class="message" @tap="$open('/pages/notification/notification')">
						<image v-if="true" class="inform" src="/static/imgs/title_icon_notification.png"></image>
						<image v-else class="inform" src="/static/imgs/title_icon_notification_sel.png"></image>
					</view>
				</view>
			</view>
			<view class="data-box">
				<view class="item">
					<view class="num">{{counts.all}}</view>
					<text class="name">全部设备</text>
					<view class="label blue"></view>
				</view>
				<view class="item">
					<view class="num">{{counts.normal}}</view>
					<text class="name">正在运行</text>
					<view class="label green"></view>
				</view>
				<view class="item">
					<view class="num">{{counts.fault}}</view>
					<text class="name">故障设备</text>
					<view class="label red"></view>
				</view>
			</view>
			<view class="nav">
				<view :class="['item', {'ac': acNav == index}]" v-for="(item, index) in navs" :key="index" @tap="tapNav(index)">
					<image class="icon" :src="acNav == index ? item.acIcon : item.icon"></image>
					<text class="title">{{item.title}}</text>
				</view>
			</view>
			<view class="status-bar">
				<view class="line"></view>
				<view class="status-box">
					<view class="title">
						<text class="info">{{navs[acNav].title}}数量</text>
						<text class="num">{{allNum}}个</text>
					</view>
					<view class="select-type">
						<text class="info" @tap="toogleTypeBox">筛选设备或业务类型</text>
						<image class="select" src="../../static/imgs/title_icon_filter.png" @tap="toogleTypeBox"></image>
					</view>
				</view>
				<view :class="['select-box', {'ac': typeBoxAc}]">
					<view class="bg-top"></view>
					<view class="device-bar item-bar">
						<view class="title">设备类型</view>
						<scroll-view scroll-x="true" class="bar">
							<block v-for="(item, index) in deviceTypes" :key="index">
								<view :class="['item', {'ac': acDeviceType == index}]" @tap="tapDeviceType(index)">{{item.name}}</view>
							</block>
						</scroll-view>
					</view>
					<view v-show="businessTypes.length>0" class="business-bar item-bar">
						<view class="title">业务类型</view>
						<scroll-view scroll-x="true" class="bar">
							<block v-for="(item, index) in businessTypes" :key="index">
								<view :class="['item', {'ac': acBusinessType == index}]" @tap="tapBusinessType(index)">{{item.name}}</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item, index) in list" :key='index'>
				<view class="content">
					<view class="header">
						<view class="title">
							<text class="no">NO.</text>
							<text class="num">{{item.id}}</text>
						</view>
						<view :class="['label', {'running': item.status == 1}, {'fault': item.status == 2}, {'scrap': item.status == 3}, {'leave': item.status == 10}]">{{deviceStatus[item.status]}}</view>
					</view>
					<view class="material">
						<view class="userinfo">
							<view class="info-box">
								<view class="name-box">
									<text class="name">{{item.user_list ? item.user_list.name : ''}}</text>
									<view class="level">责任民警</view>
								</view>
								<view class="phone">{{item.user_list ? item.user_list.phone : ''}}</view>
							</view>
							<view v-if="item.status == 2" :class="['card', {'uplaod': true}, {'fault': false}]">
								<view class="title">上报计时</view>
								<view class="count-down">{{item.keepTime}}</view>
							</view>
						</view>
						<view class="device-type info-bar">
							<text class="caption">设备类型</text>
							<text class="text">{{item.equip_typename.name}}</text>
						</view>
						<view class="business-type info-bar">
							<text class="caption">业务类型</text>
							<text class="text">{{item.business_typename.name}}</text>
						</view>
						<view class="use-unit info-bar">
							<text class="caption">使用单位</text>
							<text class="text">{{item.use_mechanismidname.name}}</text>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="b-item" @tap="goProgress(index)">维保记录</view>
					<view class="b-item" @tap="callMobile(index)">联系维保人</view>
					<view class="b-item" @tap="commitFault(index)">上报故障</view>
				</view>
			</view>
		</view>
		<view v-if="!isEmpty">
			<load-more :status="loadStatus" color="#ffffff"></load-more>
		</view>
		<view v-if="isEmpty" class="empty-bar">暂无数据</view>
		<d-mask :maskSwitch='maskAc' @closeMask='closeMask'></d-mask>
	</view>
</template>

<script>
	import DMask from '@/components/d-mask/d-mask'
	import LoadMore from '@/components/uni-load-more/uni-load-more'
	import {
		index,
		gitEquipType,
		updateStatus
	} from '@/api/config'

	export default {
		data() {
			return {
				userinfo: {}, // 用户
				navs: [{
					title: '全部',
					icon: '/static/imgs/home_tab_all.png',
					acIcon: '/static/imgs/home_tab_all_sel.png',
					id: 0
				}, {
					title: '运行',
					icon: '/static/imgs/home_tab_run.png',
					acIcon: '/static/imgs/home_tab_run_sel.png',
					id: 1
				}, {
					title: '故障',
					icon: '/static/imgs/home_tab_error.png',
					acIcon: '/static/imgs/home_tab_error_sel.png',
					id: 2
				}, {
					title: '闲置',
					icon: '/static/imgs/home_tab_leisure.png',
					acIcon: '/static/imgs/home_tab_leisure_sel.png',
					id: 10
				}, {
					title: '报废',
					icon: '/static/imgs/home_tab_scrapped.png',
					acIcon: '/static/imgs/home_tab_scrapped_sel.png',
					id: 3
				}], // nav列表
				page: 1,
				requestKey: true, // 请求开关
				isEmpty: false, // 是否为空
				loadStatus: 'more', // more loading noMore
				deviceTypes: [], // 设备类型
				businessTypes: [], // 业务类型
				acNav: 0, // 当前点击的tab
				acDeviceType: 0, // 当前点击的设备类型
				deviceTypeId: 0, // 当前点击的设备类型的id
				acBusinessType: 0, // 当前点击的业务类型
				businessId: 0, // 当前点击的业务类型的id
				typeBoxAc: false, // 盒子开关
				maskAc: false, // 遮罩开关
				counts: {}, // 设备状态的总数
				allNum: 0, // 当前分类的全部数量
				list: [], // 设备列表
				deviceStatus: {
					1: '设备运行中',
					2: '设备已故障',
					3: '设备已报废',
					5: '设备待激活',
					10: '设备已闲置',
					100: '设备预警',
				}, // 设备状态
			};
		},
		components: {
			DMask,
			LoadMore
		},
		onLoad() {
			this.getType()
			this.userinfo = this.$storage.get('userinfo')
		},
		onPullDownRefresh() {
			this.init()
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			if (!this.requestKey) return
			this.page++
			this.getList()
		},
		methods: {
			// 获取设备类型
			async getType() {
				const params = {
					manufactor_id: this.businessId,
					parent_id: this.deviceTypeId
				}
				const [err, res] = await gitEquipType(params)
				if (res) {
					this.deviceTypes = res.data
					this.deviceTypeId = this.deviceTypes[0].id
					this.getBusinessType()
				}
			},
			// 获取业务类型
			async getBusinessType() {
				const params = {
					manufactor_id: this.businessId,
					parent_id: this.deviceTypeId
				}
				const [err, res] = await gitEquipType(params)
				if (res) {
					this.businessTypes = res.data
					this.acBusinessType = 0
					this.businessId = this.businessTypes[0].id
					this.getList()
				}
			},
			// 切换导航
			tapNav(index) {
				this.acNav = index
				this.init()
				this.getList()
			},
			// 切换设备类型
			tapDeviceType(index) {
				this.acDeviceType = index
				this.deviceTypeId = this.deviceTypes[index].id
				this.acBusinessType = 0
				this.businessId = 0
				this.init()
				this.getBusinessType()
			},
			// 切换业务类型
			tapBusinessType(index) {
				this.acBusinessType = index
				this.businessId = this.businessTypes[index].id
				this.init()
				this.getList()
			},
			// 初始化
			init() {
				this.page = 1
				this.isEmpty = false
				this.list = []
				this.requestKey = true
			},
			// 获取列表
			async getList() {
				const params = {
					status: this.navs[this.acNav].id,
					equip_type: this.deviceTypeId,
					business_type: this.businessId,
					page: this.page
				}
				this.loadStatus = 'loading'
				const [err, res] = await index(params)
				if (res) {
					const content = res.data
					const data = content.data
					let list = data.data.data
					list.forEach(item => {
						item.keepTime = ''
					})
					this.counts = content.count
					this.allNum = data.count
					if (list.length == 0 && this.page == 1) {
						this.requestKey = false
						this.isEmpty = true
						return
					} else if (list.length == 0 && this.page > 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.list = this.list.concat(list)
					if (list.length < data.data.per_page) {
						this.requestKey = false
						this.loadStatus = 'noMore'
					} else {
						this.loadStatus = 'more'
					}
					this.keepTime()
				}
				if (err) {
					this.requestKey = false
					this.isEmpty = true
				}
			},
			// 上报计时
			keepTime() {
				this.list.forEach(item => {
					if (item.status != 2) return
					const target = new Date(item.oldReportTime.create_time).getTime()
					const now = new Date().getTime()
					let diff = now - target * 1000
					let diffArr = this.$durationToTime(diff)
					let hour = parseInt(diffArr[0]) * 24
					hour = hour + parseInt(diffArr[1])
					item.keepTime = `${hour || '00'}:${diffArr[2] || '00'}:${diffArr[3] || '00'}`
					setInterval(() => {
						diff += 1000
						diffArr = this.$durationToTime(diff)
						hour = parseInt(diffArr[0]) * 24
						hour = hour + parseInt(diffArr[1])
						item.keepTime = `${hour || '00'}:${diffArr[2] || '00'}:${diffArr[3] || '00'}`
					}, 1000)
				})
			},
			// 切换类型盒子
			toogleTypeBox() {
				this.maskAc = !this.maskAc
				this.typeBoxAc = !this.typeBoxAc
			},
			// 关闭遮罩
			closeMask() {
				this.maskAc = false
				this.typeBoxAc = false
			},
			// 前往进度
			goProgress(index) {
				this.$open('/pages/progress/progress', {
					info: JSON.stringify(this.list[index])
				})
			},
			// 打电话
			callMobile(index) {
				const phone = this.list[index].user_list.phone
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 上报故障
			async commitFault(index) {
				if (this.list[index].status == 2){
					this.$toast('该设备状态已经是故障！')
					return
				} 
				const params = {
					id: this.list[index].id
				}
				const [err, res] = await updateStatus(params)
				if (res) {
					this.$toast('上报成功！')
					this.init()
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	page {
		@include square(100%);

		.empty-bar {
			@include flex-row();
			@include font-set($font-b, $color-a);
		}

		.device {
			@include box-w(100%, $bg-c);
			min-height: 100%;
			padding-top: 660rpx;

			.fixed-box {
				@include box-w(100%, $bg-b);
				@include top(0, fixed);


				.header {
					@include box(100%, $head-height, $bg-a);
					@include flex-col(flex-end);

					.content {
						@include box(100%, 88rpx);
						@include flex-row(space-between);
						padding: 0 30rpx;

						.user,
						.message {
							@include box(200rpx, 100%);
							@include flex-row(flex-start);

							.avatar {
								@include circle(64rpx);
								border: 2rpx solid $bg-b;
							}

							.name {
								@include font-set($font-b, $color-i);
								margin-left: 10rpx;
							}

							.inform {
								@include square(50rpx);
							}
						}

						.title {
							@include font-set($font-c, $color-h);
						}

						.message {
							justify-content: flex-end;
						}
					}
				}

				.data-box {
					@include box(100%, 250rpx, $bg-a);
					@include flex-row();

					.item {
						position: relative;
						@include box(33.3333%, 100%);
						@include flex-col();

						&~.item::before {
							content: '';
							@include box(2rpx, 60rpx, $bg-b);
							@include left();
						}

						.num {
							@include font-set($font-g, $color-i);
						}

						.name {
							@include font-set($font-h, $color-c);
						}

						.label {
							@include box(20rpx, 12rpx);
							border-radius: 6rpx;
							margin-top: 10rpx;

							&.blue {
								background-color: $bg-c;
							}

							&.green {
								background-color: $bg-g;
							}

							&.red {
								background-color: $bg-h;
							}
						}
					}
				}

				.nav {
					@include box-h(168rpx, $bg-a);
					@include flex-row();

					.item {
						@include box(20%, 100%);
						@include flex-col();

						&.ac {
							position: relative;

							.title {
								color: $color-e;
							}

							&:after {
								content: '';
								@include box(60rpx, 8rpx, $bg-c);
								@include bottom(10rpx);
							}
						}

						.icon {
							@include square(72rpx);
						}

						.title {
							@include font-set($font-c, $color-c);
							margin-top: 4rpx;
						}
					}
				}

				.status-bar {
					position: relative;
					@include box(100%, 100rpx);
					@include flex-col(flex-start);
					@include font-set($font-b, $color-i);

					.line {
						@include box(100%, 20rpx, $bg-b);
					}

					.status-box {
						@include box(100%, 80rpx, $bg-a);
						padding: 0 30rpx;
						@include flex-row(space-between);

						.title {
							@include box(200rpx, 100%);
							@include flex-row(flex-start);

							.info {
								color: $color-c;
							}

							.num {
								color: $color-d;
								margin-left: 10rpx;
							}
						}

						.select-type {
							@include box(456rpx, 100%);
							@include flex-row(flex-end);

							.select {
								@include square(52rpx);
								margin-left: 10rpx;
							}
						}
					}

					.select-box {
						@include box(100%, 402rpx);
						@include bottom(0, absolute, -1);
						transition: all .5s;

						&.ac {
							bottom: -402rpx;
						}
						
						.bg-top{
							@include box(100%, 20rpx, $bg-b);
						}

						.item-bar {
							padding: 30rpx;
							@include box-w(100%, $bg-a);

							&:first-of-type {
								margin-top: 20rpx;
							}

							.title {
								@include font-set($font-c, $color-c);
							}

							.bar {
								margin-top: 20rpx;
								white-space: nowrap;

								.item {
									display: inline-block;
									@include box(210rpx, 72rpx, $bg-i);
									@include font-set($font-h, $color-c);
									text-align: center;
									line-height: 72rpx;
									border-radius: 4rpx;

									&.ac {
										background-color: $bg-c;
										color: $color-a;
									}

									&~.item {
										margin-left: 30rpx;
									}
								}
							}
						}
					}
				}

			}

			.list {
				@include box-w(100%);
				@include flex-col(flex-start);
				padding: 40rpx 0;

				.list-item {
					position: relative;
					@include box(690rpx, 594rpx) @include flex-col(flex-end);
					margin-top: 60rpx;

					.content {
						@include top(0, absolute, 95);
						@include box(100%, 494rpx, $bg-a url('@/static/imgs/list-bg.png') no-repeat top center/100%);
						border-radius: 4rpx;
						box-shadow: 0 8rpx 8rpx 0 rgba(39, 96, 133, 0.20);
						padding: 0 30rpx 30rpx;

						.header {
							@include box(100%, 102rpx);
							@include flex-row(space-between);
							border-bottom: 2rpx solid #eee;

							.title {
								@include font-set($font-d, $color-c);

								.num {
									color: $color-e;
								}
							}

							.label {
								@include box(150rpx, 56rpx);
								@include flex-row();
								@include font-set($font-i);
								border-radius: 2rpx;

								&.running {
									background-color: $bg-j;
									color: $bg-g;
								}

								&.fault {
									background-color: $bg-k;
									color: $color-k;
								}

								&.leave {
									background-color: $bg-l;
									color: $color-d;
								}

								&.scrap {
									background-color: $bg-m;
									color: $color-j;
								}
							}
						}

						.material {
							@include box(100%, 390rpx);

							.userinfo {
								@include box(100%, 128rpx);
								@include flex-row(space-between);

								.info-box {
									@include box(50%, 100%);
									@include flex-col(center, flex-start);

									.name-box {
										@include box-w();
										@include flex-row(flex-start);

										.name {
											@include font-set($font-c, $color-i, 500);
										}

										.level {
											@include box(112rpx, 34rpx);
											border: 2rpx solid $bg-c;
											border-radius: 2rpx;
											@include font-set($font-a, $color-f);
											@include flex-row();
											margin-left: 36rpx;
										}
									}

									.phone {
										@include font-set($font-c, $color-i, 500);
										margin-top: 16rpx;
									}
								}

								.card {
									@include box(150rpx, 112rpx);
									@include font-set($font-i);
									@include flex-col(flex-start);
									margin-top: 20rpx;

									&.fault {
										background-color: $bg-k;
										color: $color-k;
									}

									&.uplaod {
										background-color: $bg-n;
										color: $bg-c;
									}

									.title {
										@include box(100%, 50%);
										@include flex-row();
										align-self: flex-end;
									}

									.count-down {
										@include box(138rpx, 50rpx, $bg-a);
										@include flex-row();
									}
								}
							}

							.info-bar {
								@include box(100%, 44rpx);
								@include flex-row(space-between);
								margin-top: 30rpx;
								@include font-set($font-c);

								.caption {
									color: $color-c;
								}

								.text {
									color: $color-e;
									font-weight: 500;
								}
							}
						}
					}

					.bottom {
						@include box(610rpx, 100rpx, $bg-a);
						padding: 30rpx 46rpx;
						@include flex-row();

						.b-item {
							position: relative;
							@include box(33.3333%, 100%);
							@include flex-row();
							@include font-set($font-b, $color-d);

							&~.b-item::before {
								content: '';
								@include left();
								z-index: 1;
								@include box(2rpx, 28rpx, $bg-b);
							}
						}
					}
				}
			}
		}
	}
</style>
